<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../../base/plugins/layui/css/layui.css" />
		<style type="text/css">

		</style>
	</head>

	<body>
		<blockquote class="site-text layui-elem-quote">
			<h3>用户列表管理</h3>
		</blockquote>

		<div class="layui-row">
			<div class="layui-col-md5">
				<button class="layui-btn addUser ">添加用户</button>
				<button class="layui-btn updateUser">批量删除</button>
				<button class="layui-btn">下载导入模板</button>
				<button class="layui-btn">导入</button>
				<button class="layui-btn">导出</button>
			</div>
			<div class="layui-col-md7">
				<div class="layui-form-item">
					<label class="layui-form-label">账号</label>
					<div class="layui-input-inline">
						<input type="text" id="account" name="password" placeholder="请输入账号" autocomplete="off" class="layui-input">
					</div>
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-inline">
						<input type="text"  id="name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
					</div>
					<button class="layui-btn" onclick="add()">添加</button>
				</div>
			</div>
			<hr/>
			<form class="layui-form">
				<table class="layui-table" id="mytable">
					<colgroup>

					</colgroup>
					<thead>
						<tr>
							<th></th>
							<th>账号</th>
							<th>姓名</th>
							<th>手机号码</th>
							<th>籍贯</th>
							<th>出生日期</th>
							<th>账号是否使用</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><input type="checkbox" /></td>
							<td>zhangsan</td>
							<td>张三</td>
							<td></td>

							<td></td>
							<td></td>
							<td>
								<div class="layui-input-block">
									<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
								</div>
							</td>

							</td>
							<td>
								<input type="button" class="layui-btn  layui-btn" value="编辑" />
								<input type="button" class="layui-btn  layui-btn" value="重置密码" />
								<input type="button" class="layui-btn layui-btn-danger layui-btn" value="删除" id="dedate" onclick="del(this)" />
							</td>
						</tr>
					
						

					</tbody>

				</table>
			</form>
			<script src="../../../base/layui/layui.js"></script>
			<script src="../../../base/js/jquery-1.11.3.min.js "></script>
			<script type="text/javascript ">
			
			select();
			/**
			 * 李培元
			 * 2018  8 29
			 */
			function select(){
				var lists={
				"list":[{
					"account":"lipeiyuan",
					"name":"李培元",
					"mobile":1454544,
					"address":"11111",
					"birthday":"2020.15.14"
					
				},{
					"account":"dw",
					"name":"王菲",
					"mobile":21111,
					"address":"111111",
					"birthday":"20014.5.25"
					
				}]
				};
				/**
				 * 李培元
				 * 2018 928
				 */
				var list =lists.list;
				 var tbody = document.getElementById("mytable").getElementsByTagName("tbody").item(0);
				for (var i=0;i<list.length;i++){
					var tr=document.createElement("tr");
					var td0=document.createElement("td");
					td0.innerHTML="<input type='checkbox' />";
					var td1=document.createElement("td");
					td1.innerText=list[i].account;
					var td2=document.createElement("td");
					td2.innerText=list[i].name;
					var td3=document.createElement("td");
					td3.innerText=list[i].mobile;
					var td4=document.createElement("td");
					td4.innerText=list[i].address;
					var td5=document.createElement("td");
					td5.innerText=list[i].birthday;
					var btnTd1 =document.createElement("td");
					btnTd1.innerHTML="<div class='layui-input-block'><input type='checkbox'  lay-skin='switch' lay-text='开启|关闭'></div>";
					var btnTd2 =document.createElement("td");
					btnTd2.innerHTML="<input type='button' class='layui-btn  layui-btn' value='编辑' /><input type='button' class='layui-btn  layui-btn' value='重置密码' /><input type='button' class='layui-btn layui-btn-danger layui-btn' value='删除'  id='dedate' onclick='del(this)'/>";
					tr.appendChild(td0);
					tr.appendChild(td1);
					tr.appendChild(td2);
					tr.appendChild(td3);
					tr.appendChild(td4);
					tr.appendChild(td5);
					tr.appendChild(btnTd1);
					tr.appendChild(btnTd2);
					tbody.appendChild(tr);
				}
			};
			
			
			function del(obj){
				var tr  =obj.parentNode.parentNode;
				tr.parentNode.removeChild(tr);
				
			};
			
			function add(){
				var name =document.getElementById("name").value;
				var account =document.getElementById("account").value;
				var tbody = document.getElementById("mytable").getElementsByTagName("tbody").item(0);
					var tr=document.createElement("tr");
					var td0=document.createElement("td");
					td0.innerHTML="<input type='checkbox' />";
					var td1=document.createElement("td");
					td1.innerText=account;
					var td2=document.createElement("td");
					td2.innerText=name;
					var td3=document.createElement("td");
					td3.innerText="";
					var td4=document.createElement("td");
					td4.innerText="";
					var td5=document.createElement("td");
					td5.innerText="";
					var btnTd1 =document.createElement("td");
					btnTd1.innerHTML="<div class='layui-input-block'><input type='checkbox'  lay-skin='switch' lay-text='开启|关闭'></div>";
					var btnTd2 =document.createElement("td");
					btnTd2.innerHTML="<input type='button' class='layui-btn  layui-btn' value='编辑' /><input type='button' class='layui-btn  layui-btn' value='重置密码' /><input type='button' class='layui-btn layui-btn-danger layui-btn' value='删除'  id='dedate' onclick='del(this)'/>";
					tr.appendChild(td0);
					tr.appendChild(td1);
					tr.appendChild(td2);
					tr.appendChild(td3);
					tr.appendChild(td4);
					tr.appendChild(td5);
					tr.appendChild(btnTd1);
					tr.appendChild(btnTd2);
					tbody.appendChild(tr);
			};
			  /**
			   * 李培元修改
			   */
			
				layui.use('form', function() {
					var form = layui.form;
					form.render();
					$(".addUser").click(function() {
					var index = layer.open({
											type : 2,
											content : '用户新增.html',
											title : false,
											maxmin:true,
											closeBtn : 1
										});
										 
										 layer.full(index);  
					});
					
				$(".updateUser").click(function() {
					var index = layer.open({
											type : 2,
											content : '编辑用户信息.html',
											area: ['400px','250px'],
											title : false,
											maxmin:true,
											closeBtn : 1
										});
										 
										 layer.full(index);  
					});
				});
			</script>
	</body>

</html>